<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: darkblue;
        }
        
        .fu {
            width: 300px;
            height: 300px;
            background: darkgoldenrod;
        }
        
        .zi {
            width: 150px;
            height: 150px;
            background: darkgreen;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 v-on:click="say()">你好</h1>
        <h1 @click="say()">世界</h1>
        <div id="box" @mouseover="run"></div>
        <div class="fu" @click="fu">
            <div class="zi" @click.stop="zi($event)"></div>
        </div>
        <h1 @click.once="first()">只触发一次的事件</h1>
        <div class="fu" @click.self="single()">
            <div class="zi"></div>
        </div>
        <form action="" @submit.prevent="submit()">
            <input type="submit">
        </form>
        <input type="text" @keydown.13="mykeydown($event)">
        <input type="text" @keydown.ctrl.shift.B="chufa($event)">
        <h1 @click="sex='男'">大哥大哥欢迎你</h1>
    </div>
    <script src="vue.js"></script>
    <script>
        // v-on:事件名 = "函数名()"
        // 简写  @事件名="函数() 或语句"
        // 鼠标事件  click  mouseover mouseout mouseenter mouseleave mousedown mouseup mousemove 
        // 键盘事件  keydown keypress keyup 
        // 表单事件  focus blur change submit reset select 
        // 其他事件  scroll resize 

        // 事件修饰符
        // $event----事件对象
        // .stop  阻止事件冒泡
        // .once  事件只触发一次
        // .self  只点击元素本身触发事件 子元素不触发
        // .prevent 阻止默认行为
        // -------------------------------------------
        // .capture 事件捕获
        // .passive 会告诉浏览器你不想阻止事件的默认行为。
        // vue 提供了键盘事件的 按键修饰符
        // 键盘编码     @keydown.65="事件"
        // 特殊字符  ctrl shift alt esc delete enter tab meta  
        // .up .down .left .right .space

        new Vue({
            el: "#app",
            data() {
                return {
                    sex: ""
                }
            },
            mounted() { //组件挂载完成  类似onload 
                // vue实例中 this 当前vue实例对象

            },
            methods: { //事件函数和普通函数
                say() {
                    alert("过年好")
                    this.happy();
                },
                happy() {
                    alert("开心")
                },
                run() {
                    var box = document.getElementById("box");
                    box.style.background = "red"
                },
                fu() {
                    alert("父元素触发")
                },
                zi(e) {
                    // e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
                    alert("子元素触发")
                },
                first() {
                    alert("触发了一次")
                },
                single() {
                    alert("点击自身部分触发")
                },
                submit() {

                    alert("正在提交。。。")
                },
                mykeydown(e) {

                    // 按下回车
                    // if (e.keyCode == 13) {
                    //     alert("按下回车")
                    // }
                    alert("按下回车")
                },
                chufa() {
                    alert("触发事件")
                }
            }
        })
    </script>
</body>

</html>